<template>
  <div class="page-shards-list">
    <dialogSetNotIncluded
      v-if="dialogSetNotIncludedVisible"
      v-model="dialogSetNotIncludedVisible"
      :user-name="userList[currentEditNotIncludedUserIndex].data.player.name"
      :not-included="notIncludedList[currentEditNotIncludedUserIndex]"
      :all-hero-list="allHeroList"
      @change-not-included="changeNotIncluded"
    />
    <div
      class="flex between"
      style="margin-bottom: 8px"
    >
      <div>
        <el-checkbox
          v-model="checkAll"
          label="all"
          :indeterminate="isIndeterminate"
          @change="handleCheckAllChange"
        >
          全部
        </el-checkbox>
        <el-checkbox-group
          v-model="checkList"
          @change="handleCheckedRarityChange"
        >
          <el-checkbox
            v-for="item in rarityList"
            :key="item.value"
            :label="item.value"
          >
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </div>

      <div>
        <el-button
          size="mini"
          @click="checkList = []"
        >
          清空稀有度
        </el-button>
        <el-button
          size="mini"
          @click="clearFilter"
        >
          重置所有过滤项
        </el-button>
      </div>
    </div>

    <div style="height: calc(100vh - 172px)">
      <el-table
        ref="shardTableRef"
        :data="computedShardsList"
        highlight-current-row
        stripe
        border
        height="100%"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
        />
        <el-table-column
          prop="id"
          label="ID"
          width="80"
        />

        <el-table-column
          prop="name"
          label="名称"
          width="110"
        />

        <el-table-column
          label="稀有度"
          width="80"
        >
          <template #default="scope">
            <div
              class="rarity"
              :class="`${scope.row.rarity}`"
            >
              {{ transformRarityName(scope.row.rarity) }}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          v-for="(user, userIndex) in userList"
          :key="`userColumn${userIndex}`"
          align="center"
          :label="`${user.data.player.name}`"
        >
          <template #header>
            <div class="flex center">
              <div>{{ user.data.player.name }}</div>
              &nbsp;
              <div
                class="btnSetNotIncluded"
                @click="setNotIncluded(userIndex)"
              >
                设置未收录
              </div>
            </div>
          </template>
          <el-table-column
            :key="`shard${userIndex}`"
            :label="`持有碎片`"
          >
            <template #default="scope">
              <div>{{ scope.row.shards[userIndex] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            :key="`included${userIndex}`"
            :filters="[
              { text: '已收录', value: 1 },
              { text: '未收录', value: 0 },
            ]"
            :filter-method="
              (value, row) => filterIncluded(value, row, userIndex)
            "
            :label="`收录状态`"
          >
            <template #default="scope">
              <div
                :class="{ 'not-included': scope.row.included[userIndex] === 0 }"
              >
                {{ scope.row.included[userIndex] === 1 ? '' : '未收录' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :key="`have${userIndex}`"
            :filters="[
              { text: '仓库中有', value: 1 },
              { text: '仓库中无', value: 0 },
            ]"
            :filter-method="(value, row) => filterHave(value, row, userIndex)"
            :label="`仓检`"
          >
            <template #default="scope">
              <div :class="{ 'have-not': scope.row.have[userIndex] === 0 }">
                {{ scope.row.have[userIndex] === 1 ? '' : '仓库中无' }}
              </div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
          prop="name"
          label="名称"
          width="110"
        />
        <el-table-column
          label="共有碎片"
          prop="holdings"
          width="85"
        />
        <el-table-column
          label="仍缺"
          prop="required"
          width="80"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
export default defineComponent({
  name: 'HeroList',
})
</script>
<script setup>
import { defineComponent, ref, unref, computed } from 'vue'
import { useStore } from 'vuex'
import {
  ElButton,
  ElCheckboxGroup,
  ElCheckbox,
  ElMessage,
  ElTable,
  ElTableColumn,
} from 'element-plus'
import dialogSetNotIncluded from '@/components/dialogSetNotIncluded.vue'
import useCommon from '../useCommon'

const { updateUserNotIncluded, getNotIncluded } = useCommon()
const $store = useStore()
const allHeroList = computed(() => $store.state.allHeroList)
const notIncludedList = computed(() => $store.state.notIncludedList)
const userList = computed(() => $store.state.user.list)

const rarityList = ref([
  {
    name: 'SP',
    value: 'SP',
  },
  {
    name: 'SSR',
    value: 'SSR',
  },
  {
    name: 'SR',
    value: 'SR',
  },
  {
    name: 'R',
    value: 'R',
  },
  {
    name: 'N',
    value: 'N',
  },
  {
    name: '素材',
    value: 'MATERIAL',
  },
  {
    name: '联动',
    value: 'INTERACTIVE',
  },
])
let shards = ref([])
let heroIdList = ref([])
const getShards = function () {
  shards.value = allHeroList.value
    .sort((a, b) => b.id - a.id)
    .map((item) => {
      let obj = {
        name: item.name,
        rarity: item.rarity,
        id: item.id,
        shards: [],
        // 收录状态. 手动维护额外数据(未收录id), 导出器和痒痒熊导出的数据无法判断是否为已收录, 只能判断当前仓库中有没有该卡.
        included: [],
        // 当前 式神录/仓库 中是否存在该卡
        have: [],
        // 需求量。所有账号共计
        required: 0,
        // 持有量。所有账号共计
        holdings: 0,
      }
      // 联动
      if (item.interactive === true) {
        obj.interactive = true
      }

      userList.value.forEach((user, index) => {
        // 处理持有的碎片和召唤所需碎片数
        user.data.hero_book_shards.forEach((hero) => {
          if (obj.id === hero.hero_id) {
            obj.bookMaxShards = hero.book_max_shards
            obj.shards[index] = hero.shards
          }
        })

        heroIdList[index] = Array.from(
          new Set(user.data.heroes.map((item) => item.hero_id)),
        )

        obj.included[index] =
          unref(notIncludedList)[index].indexOf(parseInt(item.id)) !== -1
            ? 0
            : 1
        obj.have[index] =
          heroIdList[index].indexOf(parseInt(item.id)) !== -1 ? 1 : 0
      })

      obj.holdings = obj.shards.reduce((sum, current) => {
        sum += current
        return sum
      }, 0)

      const notIncludedCount = obj.included.reduce((sum, current) => {
        // 检查收录状态，根据收录状态计算总需求量
        return current === 0 ? ++sum : sum
      }, 0)

      const temp = obj.bookMaxShards * notIncludedCount - obj.holdings
      obj.required = temp > 0 ? temp : '-'
      return obj
    })
}
const transformRarityName = function (rarity) {
  let result = ''
  rarityList.value.forEach((item) => {
    if (item.value == rarity) {
      result = item.name
    }
  })
  return result
}

let checkList = ref(['SP', 'SSR'])
const computedShardsList = computed(() => {
  let result = []
  if (checkList.value.indexOf('INTERACTIVE') !== -1) {
    result = shards.value.filter((item) => {
      return checkList.value.indexOf(item.rarity) !== -1 || item.interactive
    })
  } else {
    result = shards.value.filter((item) => {
      return (
        checkList.value.indexOf(item.rarity) !== -1 &&
        !(typeof item.interactive !== 'undefined')
      )
    })
  }
  return result
})

let isIndeterminate = ref(true)
const handleCheckAllChange = function (val) {
  checkList.value = val ? rarityList.value.map((item) => item.value) : []
  isIndeterminate.value = false
}

let checkAll = ref(false)
const handleCheckedRarityChange = function (value) {
  checkAll.value = value.length === rarityList.value.length
  isIndeterminate.value =
    value.length > 0 && value.length < rarityList.value.length
}

let shardTableRef = ref(null)
const clearFilter = function () {
  shardTableRef.value.clearFilter()
}
const filterIncluded = function (value, row, index) {
  return value === row.included[index]
}
const filterHave = function (value, row, index) {
  return value === row.have[index]
}

let currentEditNotIncludedUserIndex = ref(-1)
let dialogSetNotIncludedVisible = ref(false)

const setNotIncluded = function (userIndex) {
  currentEditNotIncludedUserIndex.value = userIndex
  dialogSetNotIncludedVisible.value = true
}

const changeNotIncluded = function (newCheckedData) {
  $store.commit('updateNotIncluded', {
    index: currentEditNotIncludedUserIndex.value,
    value: newCheckedData,
  })
  updateUserNotIncluded(currentEditNotIncludedUserIndex.value, {
    id: userList.value[currentEditNotIncludedUserIndex.value].data.player.id,
    value: unref(newCheckedData),
  })
    .then(() => {
      ElMessage.success(`设置未收录成功`)
      getShards()
    })
    .catch((e) => {
      ElMessage.error(e.message || '设置未收录出错')
    })
}

getNotIncluded().then(() => {
  getShards()
})
</script>

<style lang="scss" scoped>
@import '@/assets/css/flex-custom.scss';
@import '@/assets/css/border-box.scss';
.page-shards-list {
  padding: 0 0 20px;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.rarity {
  font-weight: 800;

  &.SP {
    color: #ee2c2c;
  }

  &.SSR {
    color: #ffa500;
  }

  &.SR {
    color: #9400d3;
  }

  &.R {
    color: #1874cd;
  }

  &.N,
  &.MATERIAL {
    color: #9c9c9c;
  }
}

.included {
  color: #409eff;
}

.not-included {
  color: #f56c6c;
}

.have-not {
  color: #e6a23c;
}

.btnSetNotIncluded {
  font-weight: 400;
  font-size: 12px;
  cursor: pointer;
}
</style>
